<template>
  <div class="shop-container">
    <Headbar/>
    <HeadMenu/>
    <Hungbar/>
    <div class="shop-main">
      <div class="shop-search-bar">
        <div class="shop-search-options-ul">
          <div :class="sortSta == 0? 'shop-search-ops-li shop-search-ops-li-active' : 'shop-search-ops-li'" @click="getListBySynd()">综合排序</div>
          <div :class="sortSta == 1? 'shop-search-ops-li shop-search-ops-li-active' : 'shop-search-ops-li'" @click="getListBySales()">销量
            <img v-if="sortSta == 0" src="../../assets/images/search/search_05.png">
            <img v-else src="../../assets/images/search/search_19.png">
          </div>
          <!-- 隐藏认证商家等搜索筛选条件 -->
          <!-- <div class="shop-search-ops-li shop-search-checkbox">
            <el-checkbox-group v-model="factoryType" @change="getListByType()">
              <el-checkbox v-for="(item, index) in factoryTypes" :label="item.value" :key="item.value">{{item.label}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="shop-search-ops-li shop-search-firm">
            <el-checkbox v-model="firmChecked" @change="getListByCertStatus">企业认证</el-checkbox>
          </div> -->
        </div>
      </div>

      <div class="shop-search-list min-height-300" v-loading="loading">
        <div class="shop-con" v-for="(item,index) in list" :key="index">
          <div class="shop-details" @click="goWebsite(item.mallType, item.factoryId, 'c', item.domainName)">
            <h3 class="shop-company">
              <span class="company-greet">{{item.factoryName}}</span>
              <img class="special-img" v-if="item.factoryPackage != 1" src="../../assets/images/search/search_10.png"/>
            </h3>
            <p class="shop-address">地址：{{item.address}}</p>
            <p class="shop-mainPD">主营：<span class="main-kw">
              <span v-if="item.mallType == 1" v-for="(category, i) in item.categorys" :key="i">{{category.name}} </span>
              <span v-if="item.mallType == 2">{{ item.primaryProducts }}</span>
            </span>
            </p>
            <div class="shop-label">
              <img class="label-img" v-if="item.factoryType == 0 && item.mallType == 1" src="../../assets/images/search/search_08.png"/>
              <img class="label-img" v-else-if="item.factoryType == 1 && item.mallType == 1" src="../../assets/images/search/search_07.png"/>
              <img class="label-img" v-else-if="item.factoryType == 2 && item.mallType == 1" src="../../assets/images/search/search_09.png"/>
              <!-- <span class="label-text" v-if="item.supplierType == 0">云工厂</span>
              <span class="label-text" v-else-if="item.supplierType == 1">经销商</span>
              <span class="label-text" v-else-if="item.supplierType == 2">零售商</span> -->
              <img class="switch-label" v-if="item.mallType == 1" src="../../assets/images/search/search_20.png" title="交易安全认证">
              <img class="switch-label" v-if="item.mallType == 2" src="../../assets/images/search/search_21.png" title="推广版">
              <img class="label-text-img" v-if="item.supplierType == 0 && item.mallType == 1" src="../../assets/images/search/search_16.png">
              <img class="label-text-img" v-else-if="item.supplierType == 1 && item.mallType == 1" src="../../assets/images/search/search_17.png">
              <img class="label-text-img" v-else-if="item.supplierType == 2 && item.mallType == 1" src="../../assets/images/search/search_18.png">
              <span class="approve-state" v-if="item.factoryCertified == 0 && item.mallType == 1">企业未认证</span>
              <span class="approve-state" v-else-if="item.factoryCertified == 1 && item.mallType == 1">以上信息已认证</span>

            </div>
          </div>
          <div class="shop-products">
            <div class="shop-pd-box" v-for="(product, idx) in item.products" :key="idx" >
              <div class="shop-pd-per" @click="goWebsite(item.mallType, product.productId, 'p')">
                <img v-if="item.mallType == 1" :src="URL.PIC+product.productImg" width="140px" height="140px">
                <img v-if="item.mallType == 2" :src="product.productImg" width="140px" height="140px">
                <P class="shop-pd-price">￥ {{product.productPrice}} / {{product.productUnit}}</P>
              </div>
            </div>
            <!--<div class="shop-right-share">
              <img src="../../assets/images/search/search_12.png"/>
            </div>
            <div class="shop-right-share">
              <img src="../../assets/images/search/search_13.png"/>
            </div>
            <div class="shop-Qr-code">
              <img class="qr-img" src="../../assets/images/merchants/pub-ico39.png"/>
              <p class="qr-tips">扫一扫，进入手机旺铺</p>
            </div>-->
          </div>
        </div>
        <div v-if="!list || list.length == 0">
          <div class="nodata">
            <img src="../../assets/images/member/notnull.png" class="search-nullImg">
            <p class="search-null-text">无匹配云工厂哦~</p>
          </div>
        </div>
      </div>
      <Pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="size"
                  @pagination="getList"/>
    </div>
    <Footbars/>
  </div>
</template>
<script>
  import Headbar from '@/components/Layouts/Headbar'
  import HeadMenu from '@/components/Layouts/HeadMenu'
  import Hungbar from '@/components/Layouts/Hungbar'
  import Footbars from '@/components/Layouts/Footbars'
  import Pagination from '@/components/Pagination'
  import {factorySearch} from '@/api/search'

  export default {
    name: 'SearchShop',
    components: {
      Headbar,
      HeadMenu,
      Hungbar,
      Footbars,
      Pagination
    },
    data() {
      return {
        loading: false,
        total: 0,
        page: 1,
        size: 20,
        listQuery: {
          kw: this.getUrlParams('factoryName'),
          factoryType: null,
          field: null,
          order: null,
          factoryCertified: null
        },
        list: {},
        value1: null,
        factoryType: [],
        factoryTypes: [{
          label: '旗舰店',
          value: 0
        }, {
          label: '直卖店',
          value: 1
        }, {
          label: '批发店',
          value: 2
        }],
        firmChecked: false,
        sortSta: 0
      }
    },
    head() {
      return {
        title: '一呼百应工业品直卖网_'+this.kw+'厂商/公司',
        meta: [
          { name: 'keywords', content: '一呼百应,工业品直卖网,'+this.kw+','+this.kw+'厂商,'+this.kw+'公司' }
        ]
      }
    },
    async asyncData ({ app, query }) {
      const params = {
          kw: query.factoryName,
          // "sort.field": this.listQuery.field,
          // "sort.order": this.listQuery.order,
          "pageable.page": 1,
          "pageable.size": 50,
          // maxPrice: this.listQuery.maxPrice,
          // minPrice: this.listQuery.minPrice,
          // categoryIds: this.listQuery.categoryIds.join(','),
          // categoryNames: this.listQuery.categoryNames.join(','),
          // factoryCertified: this.listQuery.factoryCertified,
          // productAttributes: this.listQuery.productAttributes.join(','),
          // productAttributesName: this.listQuery.productAttributesName.join(','),
          // brand:this.brand
        };
      let [res1] = await Promise.all([
       app.$axios.get('/search/factory/search/merge', { params: params })
     ])
     return{
      kw: query.factoryName,
      list: res1.data.data.list
     }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        const params = {
          "pageable.page": this.page,
          "pageable.size": this.size,
          kw: this.listQuery.kw,
          factoryType: this.listQuery.factoryType ? this.listQuery.factoryType + '' : null,
          "sort.field": this.listQuery.field,
          "sort.order": this.listQuery.order,
          factoryCertified: this.listQuery.factoryCertified,
          productSize: 4
        }
        this.loading = true
        factorySearch(params).then(res => {
          this.loading = false
          this.list = res.data.list;
          this.total = res.data.pageCount;
        })
      },
      //店铺类型查询
      getListByType() {
        this.listQuery.factoryType = this.factoryType;
        this.getList();
      },
      //认证查询
      getListByCertStatus() {
        this.listQuery.factoryCertified = this.firmChecked ? 1 : null;
        this.getList();
      },
      //综合排序
      getListBySynd() {
        if(this.sortSta === 1) {
          this.sortSta = 0;
          this.listQuery.field = null;
          this.listQuery.order = null;
          this.getList();
        }

      },
      //销量排序
      getListBySales(){
        if(this.sortSta === 0) {
        this.sortSta = 1;
        this.listQuery.field = 'factory_sale';
        this.listQuery.order = 'DESC';
        this.getList();
        }

      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/pages/search.scss';
</style>
<style lang="scss">
.shop-main{
  .el-input__inner {
    background: #eee;
    border: none;
    color: #888;
  }
  .el-checkbox{
    color: #888;
  }
  .el-input__inner::-webkit-input-placeholder {
    color: #888;
  }

  .el-select .el-input__inner:focus {
    border: none;
  }

  .el-select .el-input.is-focus .el-input__inner {
    background: #eee;
    border: none;
  }
  .shop-search-ops-li{
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #255b8b;
      border-color: #255b8b;
    }
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #888;
  }

  .el-checkbox__inner:hover {
    // border-color: #888;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    // border-color: #888;
  }

}

</style>
